<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet">
    <title>Light Message</title>
</head>

<body>

<!--Alert Bar-->
<nav class="nav fixed-top">
    <div class="alert-danger">Welcome To WeiYuanStudio's ChatRoom</div>
</nav>

<!--Message-->

<div id="message-list" style="margin-bottom: 72px">
    <message-item
        v-for="item in messages"
        v-bind:message="item"
        v-bindme:key="date"></message-item>
</div>

<!--Message Send Bar-->
<nav class="navbar fixed-bottom">
    <div class="card w-100">
        <div class="card-body p-2">
            <div class="input-group">
                <input type="text" class="form-control" id="Msg" placeholder="Input Your Message">
                <div class="input-group-append">
                    <button class="btn bg-primary" type="button" id="button-send">Send</button>
                </div>
            </div>
        </div>
    </div>
</nav>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.staticfile.org/vue/2.6.10/vue.js"></script>
<script>
    document.getElementById('button-send').onclick = sendMessage;

    Vue.component('message-item', {
        props: ['message'],
        template: '<div class="card border-dark m-3" style="max-width: 18rem;">' +
            '<div class="card-header p-1 pl-2">{{ message.date }} from {{ message.user }}</div>\n' +
            '<div class="card-body text-dark">\n' +
            '<p class="card-text">{{ message.message }}</p>\n' +
            '</div>' +
            '</div>'
    });

    var messageList = new Vue({
        el: '#message-list',
        data: {
            messages: [
                {
                    "date":"N/A",
                    "user":"WeiYuan's ChatBot",
                    "message":"Loading......"
                }
            ]
        }
    });

    function sendMessage() {
        let Msg = document.getElementById('Msg').value;
        if (Msg === '') {
            alert("Please Input Your Message");
        } else {
            let xmlSend = new XMLHttpRequest();
            xmlSend.open('POST', './send', true); //Todo change Target
            xmlSend.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xmlSend.send(Msg);
            document.getElementById('Msg').value = '';
            // document.getElementById('alertBar').hidden = true
        }
    }

    let xmlReceive = new XMLHttpRequest();



    function getMessage() {
        xmlReceive = new XMLHttpRequest();
        xmlReceive.open('GET', "./get", true);
        xmlReceive.onreadystatechange = function () {
            if(xmlReceive.readyState === 4) {
                let responseJSON = JSON.parse(xmlReceive.responseText);
                messageList._data.messages = responseJSON.messages;
                setTimeout(getMessage, 2000);
            }
        };
        xmlReceive.send();
    }
    getMessage();
</script>
</body>
</html>